<template>
  <div id="basic">
    <div style="">


      <!-- 孕期营养处方 -->
      <div style="">
        <div style=" width: 100%; background-color:#2ab28b;  text-align: center; margin:auto">
          <div style="font-size: 40px; font-weight: bold; color: #ffffff;padding-top:20px;">{{ Titlename }}</div>
          <!-- <span style="font-size: 30px; color: #666666; margin-left: 20px;display: block;">基本信息报告</span> -->
          <div style="margin-top:30px;font-size: 24px;padding-bottom: 20px;font-weight: bold;color:#333333;">儿童营养综合评价建议报告单
          </div>
        </div>
      </div>
      <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
        <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童基本信息</div>
      </div>
      <div
        style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px;font-size: 14px;"
        v-if="times == 2">
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            年龄
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ births }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;border-right: 2px solid #09a578;">
            {{ report_time }}
          </div>
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            BMI</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ BMIs }}
          </div>
        </div>
      </div>
      <div style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px"
        v-if="times == 1">
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 90%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ report_time }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            头围
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.touwei ? contents.touwei + 'CM' : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生身长
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengsg ? contents.chushengsg + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengtz ? contents.chushengtz + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            腹围
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.fuwei ? contents.fuwei + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            血型
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.xuexing_value ? contents.xuexing_value : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            民族
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.minzu_value ? contents.minzu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            与监护人关系
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guanxi_value ? contents.guanxi_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            家长受教育程度
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.jiaoyu_value ? contents.jiaoyu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生情况
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.birthSituation_value ? contents.birthSituation_value : '' }}
          </div>
        </div>
      </div>

      <!-- 运动处方 -->
      <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;">
        <div><img src="../../assets/img/26.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
          喂养建议
        </div>
      </div>
      <div style="width: 1050px;border: 2px solid #09a578;min-height: 100px;margin-top: 20px;padding: 10px 10px;">
        <textarea name="" id="" cols="30" rows="10" style="width:100%;border:none;resize: none;outline: none;"
          v-model="FeedingRecommendations"></textarea>

      </div>
      <!-- 评估指导 -->
      <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;">
        <div><img src="../../assets/img/27.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
          营养建议
        </div>
      </div>
      <div style="width: 1050px;border: 2px solid #09a578;min-height: 100px; margin-top: 20px;padding: 10px 10px;">
        <textarea name="" id="" cols="30" rows="10" style="width:100%;border:none;resize: none;outline: none;"
          v-model="NutritionRecommendations"></textarea>
      </div>
      <!-- 医生建议 -->
      <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;">
        <div><img src="../../assets/img/27.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
          医生建议
        </div>
      </div>
      <div style="width: 1050px;border: 2px solid #09a578;min-height: 100px; margin-top: 20px;padding: 10px 10px;">
        <textarea name="" id="" cols="30" rows="10" style="width:100%;border:none;resize: none;outline: none;"
          v-model="DoctorRecommendations"></textarea>
      </div>
      <!-- 复诊预约 -->
      <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;">
        <div><img src="../../assets/img/27.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
          复诊预约
        </div>
      </div>
      <!-- <div style="width: 99%; border: 2px solid #09a578; min-height: 60px; margin-top: 20px;display: flex;">
            <div
              style="width: 13%;line-height: 60px;background-color: rgb(42, 178, 139);color: #fff;height: 100%;text-align: center; border-right: 2px solid #09a578;">
              复查建议及时间
            </div>
            <div>
              <div style="margin-top: 10px; margin-left: 10px">
                复诊建议∶为避免健康风险，请及时到院复诊
              </div>
              <div style="margin-top: 5px; margin-left: 10px">
                复查建议及时间 复诊时间∶2021-12-01
              </div>
            </div>
          </div> -->
          <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              主治医师
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor}}</div>
          </div>
          <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              检测护士
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor1}}</div>
          </div>
          <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              报告日期
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{report_time}}</div>
          </div>
      <div v-if="code_1 == 'true'"
        style="margin-top: 20px;height:200px;text-align: end;margin-right: 50px;margin-bottom:10px;">
        <img style="width: 150px;height:150px;" :src="'http://' + baseUrl + '/' + codeimg" alt="">
        <div style="margin-top:10px;font-size: 20px;font-weight: bold;">
          扫码关注公众号,获取在线报告
        </div>
      </div>
    </div>
  </div>
  <div>
  </div>
</template>


<script setup>
import { defineComponent, onMounted, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import * as api from "../../api/loginHttp";
import http, { baseUrl } from "../../utils/http";
import { useRoute, useRouter } from "vue-router";
import PrintJS from "print-js";
import ChildViewDietary from "../common/ChildViewdietarys.vue";

const router = useRouter();
const route = useRoute();
const labName = ref();
const groupId = ref();
const reportId = ref();
const id = ref();
const early_intervention = ref({});
const Monitoring_content = ref({});
const high_contents = ref({});
const pagoda = ref({});
const principle = ref({});
const diet = ref({});
const contents = ref({})
const birth = ref()
const code_1 = ref(false)
const Doctor=ref()
const Doctor1=ref()
const FeedingRecommendations = ref()
const NutritionRecommendations = ref()
const DoctorRecommendations = ref()

const username = ref();
const guardian = ref();
const birthStatus = ref();
const times=ref();
const births=ref();
const imgUrl = ref();
const form = ref({
  elText: "",
  elTextTwo: "",
  elTextThree: "",
});

const letEnergy = ref({ energy: 0, start: 0, end: 0 });
const protein = ref({ energy: 0, start: 0, end: 0 });
const fat = ref({ energy: 0, start: 0, end: 0 });
const carbohydrate = ref({ energy: 0, start: 0, end: 0 });
const calcium = ref({ energy: 0, start: 0, end: 0 });
const sodium = ref({ energy: 0, start: 0, end: 0 });
const magnesium = ref({ energy: 0, start: 0, end: 0 });
const iron = ref({ energy: 0, start: 0, end: 0 });
const zinc = ref({ energy: 0, start: 0, end: 0 });
const selenium = ref({ energy: 0, start: 0, end: 0 });
const vitamin_a = ref({ energy: 0, start: 0, end: 0 });
const vitamin_e = ref({ energy: 0, start: 0, end: 0 });
const vitamin_b1 = ref({ energy: 0, start: 0, end: 0 });
const vitamin_b2 = ref({ energy: 0, start: 0, end: 0 });
const vitamin_c = ref({ energy: 0, start: 0, end: 0 });
const diet_analysis = ref({});
const hospital_name = ref();
const codeimg = ref();
const report_time = ref();
const Titlename = ref();
const BMIs=ref();
const onHome = async () => {
  await router.push({ path: "/Home" });
};
const kcalType = ref(2);

const fetchData = async () => {
  Titlename.value = localStorage.getItem('Title');
  if (route.params.groupId) {
    groupId.value = route.params.groupId;
    id.value = route.params.id;
    reportId.value = route.params.reportId;
    username.value = route.params.username;
    guardian.value = route.params.guardian;
    birthStatus.value = route.params.birth;
    codeimg.value = window.localStorage.getItem('ercode')
    if (groupId.value === 3) {
      labName.value = "婴幼儿营养测评";
    } else if (groupId.value === 5) {
      labName.value = "孕产妇营养测评";
    } else if (groupId.value === 6) {
      labName.value = "成年人营养测评";
    } else if (groupId.value === 7) {
      labName.value = "慢性病营养测评";
    } else {
      labName.value = "婴幼儿营养测评";
    }
    //获取二维码是否显示
    http.get('api/index/getAuth').then((res) => {
      let aray = res.data.data;
      let array = aray.split(',');
      if (array.includes('12')) {
        code_1.value = 'true'
      } else {
        code_1.value = 'false'
      }
    })
 //获取用户年龄
 http.get("api/archives/evaluating?id=" + id.value ).then((res) => {
      births.value=res.data.data.birth;
  });
    http.get(
      "api/archives/viewReportMember?id=" +
      reportId.value +
      "&username=" +
      username.value +
      "&guardian=" +
      guardian.value +
      "&birth=" +
      birthStatus.value
    )
      .then((res) => {
        Doctor.value=res.data.data.contents.doctor;
        Doctor1.value=res.data.data.contents.doctor1;
        BMIs.value=res.data.data.bmi;
        if (res.data.data.times) {
        let parsedDate = new Date(res.data.data.times);
        let targetDateObj = new Date('2024-01-08');
        if (parsedDate < targetDateObj) {
          times.value = 1;
        } else if (parsedDate > targetDateObj) {
          times.value = 2;
        }
      }


        if (res.data.code === 0) {
          ElMessage.error(res.data.msg);
        }
        report_time.value = res.data.data.times;
        contents.value = res.data.data.contents;
        birth.value = res.data.data.contents.birth;
        FeedingRecommendations.value = res.data.data.feed_advice
        NutritionRecommendations.value = res.data.data.nutrition_advice
        DoctorRecommendations.value = res.data.data.doctor_advice

      });

    imgUrl.value = "http://" + baseUrl + "/";

    let params = {
      groupId: groupId.value,
      id: id.value,
      reportId: reportId.value,

      username: username.value,
      guardian: guardian.value,
      birth: birthStatus.value,
    };
    const data = await api.energy(params);

    if (data.data.code == 0) {
      ElMessage.error(data.data.msg);
      await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
    }

    if (!data.data.data.diet_analysis) {
      ElMessage.error(data.data.msg);
      await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
    }
    for (let i = 0; i < data.data.data.diet_analysis.length; i++) {
      switch (i) {
        case 0:
          data.data.data.diet_analysis[i]["pName"] = "周一";
          break;
        case 1:
          data.data.data.diet_analysis[i]["pName"] = "周二";
          break;
        case 2:
          data.data.data.diet_analysis[i]["pName"] = "周三";
          break;
        case 3:
          data.data.data.diet_analysis[i]["pName"] = "周四";
          break;
        case 4:
          data.data.data.diet_analysis[i]["pName"] = "周五";
          break;
        case 5:
          data.data.data.diet_analysis[i]["pName"] = "周六";
          break;
        case 6:
          data.data.data.diet_analysis[i]["pName"] = "周日";
          break;
      }
    }

    diet_analysis.value = data.data.data.diet_analysis;

    for (let i = 0; i < data.data.data.diet.length; i++) {
      letEnergy._value.energy =
        letEnergy._value.energy + parseInt(data.data.data.diet[i]["energy"]);
      protein._value.energy =
        protein._value.energy + parseInt(data.data.data.diet[i]["protein"]);
      fat._value.energy =
        fat._value.energy + parseInt(data.data.data.diet[i]["fat"]);
      carbohydrate._value.energy =
        carbohydrate._value.energy +
        parseInt(data.data.data.diet[i]["carbohydrate"]);
      calcium._value.energy =
        calcium._value.energy + parseInt(data.data.data.diet[i]["calcium"]);
      sodium._value.energy =
        sodium._value.energy + parseInt(data.data.data.diet[i]["sodium"]);
      magnesium._value.energy =
        magnesium._value.energy + parseInt(data.data.data.diet[i]["magnesium"]);
      iron._value.energy =
        iron._value.energy + parseInt(data.data.data.diet[i]["iron"]);
      zinc._value.energy =
        zinc._value.energy + parseInt(data.data.data.diet[i]["zinc"]);
      selenium._value.energy =
        selenium._value.energy + parseInt(data.data.data.diet[i]["selenium"]);
      vitamin_a._value.energy =
        vitamin_a._value.energy + parseInt(data.data.data.diet[i]["vitamin_a"]);
      vitamin_e._value.energy =
        vitamin_e._value.energy + parseInt(data.data.data.diet[i]["vitamin_e"]);
      vitamin_b1._value.energy =
        vitamin_b1._value.energy +
        parseInt(data.data.data.diet[i]["vitamin_b1"]);
      vitamin_b2._value.energy =
        vitamin_b2._value.energy +
        parseInt(data.data.data.diet[i]["vitamin_b2"]);
      vitamin_c._value.energy =
        vitamin_c._value.energy + parseInt(data.data.data.diet[i]["vitamin_c"]);
    }

    letEnergy._value.start = data.data.data.packAge[0].start_package;
    letEnergy._value.end = data.data.data.packAge[0].end_package;
    letEnergy._value.keyword = "✔ 正常";
    letEnergy._value.color = "everyBlack";

    if (letEnergy._value.energy < letEnergy._value.start) {
      letEnergy._value.keyword = "▼ 不足";
      letEnergy._value.color = "everyRed";
      kcalType.value = 3;
    } else if (letEnergy._value.energy > letEnergy._value.end) {
      letEnergy._value.keyword = "▲ 超标";
      letEnergy._value.color = "everyOrange";
      kcalType.value = 1;
    }

    protein._value.start = data.data.data.packAge[1].start_package;
    protein._value.end = data.data.data.packAge[1].end_package;
    protein._value.keyword = "✔ 正常";
    protein._value.color = "everyBlack";
    if (protein._value.energy < protein._value.start) {
      protein._value.keyword = "▼ 不足";
      protein._value.color = "everyRed";
    } else if (protein._value.energy > protein._value.end) {
      protein._value.keyword = "▲ 超标";
      protein._value.color = "everyOrange";
    }

    fat._value.start = data.data.data.packAge[2].start_package;
    fat._value.end = data.data.data.packAge[2].end_package;
    fat._value.keyword = "✔ 正常";
    fat._value.color = "everyBlack";
    if (fat._value.energy < fat._value.start) {
      fat._value.keyword = "▼ 不足";
      fat._value.color = "everyRed";
    } else if (fat._value.energy > fat._value.end) {
      fat._value.keyword = "▲ 超标";
      fat._value.color = "everyOrange";
    }

    carbohydrate._value.start = data.data.data.packAge[3].start_package;
    carbohydrate._value.end = data.data.data.packAge[3].end_package;
    carbohydrate._value.keyword = "✔ 正常";
    carbohydrate._value.color = "everyBlack";
    if (carbohydrate._value.energy < carbohydrate._value.start) {
      carbohydrate._value.keyword = "▼ 不足";
      carbohydrate._value.color = "everyRed";
    } else if (carbohydrate._value.energy > carbohydrate._value.end) {
      carbohydrate._value.keyword = "▲ 超标";
      carbohydrate._value.color = "everyOrange";
    }

    calcium._value.start = data.data.data.packAge[4].start_package;
    calcium._value.end = data.data.data.packAge[4].end_package;
    calcium._value.keyword = "✔ 正常";
    calcium._value.color = "everyBlack";
    if (calcium._value.energy < calcium._value.start) {
      calcium._value.keyword = "▼ 不足";
      calcium._value.color = "everyRed";
    } else if (calcium._value.energy > calcium._value.end) {
      calcium._value.keyword = "▲ 超标";
      calcium._value.color = "everyOrange";
    }

    sodium._value.start = data.data.data.packAge[5].start_package;
    sodium._value.end = data.data.data.packAge[5].end_package;
    sodium._value.keyword = "✔ 正常";
    sodium._value.color = "everyBlack";
    if (sodium._value.energy < sodium._value.start) {
      sodium._value.keyword = "▼ 不足";
      sodium._value.color = "everyRed";
    } else if (sodium._value.energy > sodium._value.end) {
      sodium._value.keyword = "▲ 超标";
      sodium._value.color = "everyOrange";
    }

    magnesium._value.start = data.data.data.packAge[6].start_package;
    magnesium._value.end = data.data.data.packAge[6].end_package;
    magnesium._value.keyword = "✔ 正常";
    magnesium._value.color = "everyBlack";
    if (magnesium._value.energy < magnesium._value.start) {
      magnesium._value.keyword = "▼ 不足";
      magnesium._value.color = "everyRed";
    } else if (magnesium._value.energy > magnesium._value.end) {
      magnesium._value.keyword = "▲ 超标";
      magnesium._value.color = "everyOrange";
    }

    iron._value.start = data.data.data.packAge[7].start_package;
    iron._value.end = data.data.data.packAge[7].end_package;
    iron._value.keyword = "✔ 正常";
    iron._value.color = "everyBlack";
    if (iron._value.energy < iron._value.start) {
      iron._value.keyword = "▼ 不足";
      iron._value.color = "everyRed";
    } else if (iron._value.energy > iron._value.end) {
      iron._value.keyword = "▲ 超标";
      iron._value.color = "everyOrange";
    }

    zinc._value.start = data.data.data.packAge[8].start_package;
    zinc._value.end = data.data.data.packAge[8].end_package;
    zinc._value.keyword = "✔ 正常";
    zinc._value.color = "everyBlack";
    if (zinc._value.energy < zinc._value.start) {
      zinc._value.keyword = "▼ 不足";
      zinc._value.color = "everyRed";
    } else if (zinc._value.energy > zinc._value.end) {
      zinc._value.keyword = "▲ 超标";
      zinc._value.color = "everyOrange";
    }

    selenium._value.start = data.data.data.packAge[9].start_package;
    selenium._value.end = data.data.data.packAge[9].end_package;
    selenium._value.keyword = "✔ 正常";
    selenium._value.color = "everyBlack";
    if (selenium._value.energy < selenium._value.start) {
      selenium._value.keyword = "▼ 不足";
      selenium._value.color = "everyRed";
    } else if (selenium._value.energy > selenium._value.end) {
      selenium._value.keyword = "▲ 超标";
      selenium._value.color = "everyOrange";
    }

    vitamin_a._value.start = data.data.data.packAge[10].start_package;
    vitamin_a._value.end = data.data.data.packAge[10].end_package;
    vitamin_a._value.keyword = "✔ 正常";
    vitamin_a._value.color = "everyBlack";
    if (vitamin_a._value.energy < vitamin_a._value.start) {
      vitamin_a._value.keyword = "▼ 不足";
      vitamin_a._value.color = "everyRed";
    } else if (vitamin_a._value.energy > vitamin_a._value.end) {
      vitamin_a._value.keyword = "▲ 超标";
      vitamin_a._value.color = "everyOrange";
    }

    vitamin_e._value.start = data.data.data.packAge[11].start_package;
    vitamin_e._value.end = data.data.data.packAge[11].end_package;
    vitamin_e._value.keyword = "✔ 正常";
    vitamin_e._value.color = "everyBlack";
    if (vitamin_e._value.energy < vitamin_e._value.start) {
      vitamin_e._value.keyword = "▼ 不足";
      vitamin_e._value.color = "everyRed";
    } else if (vitamin_e._value.energy > vitamin_e._value.end) {
      vitamin_e._value.keyword = "▲ 超标";
      vitamin_e._value.color = "everyOrange";
    }

    vitamin_b1._value.start = data.data.data.packAge[12].start_package;
    vitamin_b1._value.end = data.data.data.packAge[12].end_package;
    vitamin_b1._value.keyword = "✔ 正常";
    vitamin_b1._value.color = "everyBlack";
    if (vitamin_b1._value.energy < vitamin_b1._value.start) {
      vitamin_b1._value.keyword = "▼ 不足";
      vitamin_b1._value.color = "everyRed";
    } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
      vitamin_b1._value.keyword = "▲ 超标";
      vitamin_b1._value.color = "everyOrange";
    }

    vitamin_b2._value.start = data.data.data.packAge[13].start_package;
    vitamin_b2._value.end = data.data.data.packAge[13].end_package;
    vitamin_b2._value.keyword = "✔ 正常";
    vitamin_b2._value.color = "everyBlack";
    if (vitamin_b2._value.energy < vitamin_b2._value.start) {
      vitamin_b2._value.keyword = "▼ 不足";
      vitamin_b2._value.color = "everyRed";
    } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
      vitamin_b2._value.keyword = "▲ 超标";
      vitamin_b2._value.color = "everyOrange";
    }

    vitamin_c._value.start = data.data.data.packAge[14].start_package;
    vitamin_c._value.end = data.data.data.packAge[14].end_package;
    vitamin_c._value.keyword = "✔ 正常";
    vitamin_c._value.color = "everyBlack";
    if (vitamin_c._value.energy < vitamin_c._value.start) {
      vitamin_c._value.keyword = "▼ 不足";
      vitamin_c._value.color = "everyRed";
    } else if (vitamin_c._value.energy > vitamin_c._value.end) {
      vitamin_c;
      vitamin_c._value.keyword = "▲ 超标";
      vitamin_c._value.color = "everyOrange";
    }

    setTimeout(() => {
      print("print-all");
    }, 2000);
  } else {
    ElMessage.error("栏目编号不得为空");
    await router.push({ path: "/Home" });
  }
};
const pageList = async () => {
  await router.push({ path: "/pageList/" + groupId.value });
};
onMounted(() => {
  fetchData();
});

onMounted(() => {
  // 需要获取到element,所以是onMounted的Hook
  http
    .get(
      "api/archives/viewreport?id=" +
      reportId.value +
      "&username=" +
      username.value +
      "&guardian=" +
      guardian.value +
      "&birth=" +
      birthStatus.value
    )
    .then((res) => {
      // console.log(res.data.data,'777')
      // early_intervention.value =
      //   res.data.data.high_contents.intervention_one +
      //   res.data.data.high_contents.intervention_two +
      //   res.data.data.high_contents.intervention_three;
      // Monitoring_content.value =
      //   res.data.data.high_contents.family_1 +
      //   res.data.data.high_contents.family_2 +
      //   res.data.data.high_contents.family_3 +
      //   res.data.data.high_contents.family_4 +
      //   res.data.data.high_contents.family_5 +
      //   res.data.data.high_contents.family_6 +
      //   res.data.data.high_contents.family_7 +
      //   res.data.data.high_contents.family_8 +
      //   res.data.data.high_contents.family_9 +
      //   res.data.data.high_contents.family_10 +
      //   res.data.data.high_contents.family_11 +
      //   res.data.data.high_contents.family_12 +
      //   res.data.data.high_contents.family_13;
      high_contents.value = res.data.data.high_contents;
      hospital_name.value = res.data.data.hospital_name;
      diet.value = res.data.data.diet;
      pagoda.value = res.data.data.pagoda;
      principle.value = res.data.data.principle;

      if (letEnergy._value.energy < letEnergy._value.start) {
        if (!FeedingRecommendations.value) {
          FeedingRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 1 }).filter(item => { return item.up_type == 2 })[0].content.replace(/<.*?>/ig, "");
        }
        if (!NutritionRecommendations.value) {
          NutritionRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 2 }).filter(item => { return item.up_type == 2 })[0].content.replace(/<.*?>/ig, "");
        }
        if (!DoctorRecommendations.value) {
          DoctorRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 3 }).filter(item => { return item.up_type == 2 })[0].content.replace(/<.*?>/ig, "");
        }
      } else if (letEnergy._value.energy > letEnergy._value.end) {
        if (!FeedingRecommendations.value) {
          FeedingRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 1 }).filter(item => { return item.up_type == 1 })[0].content.replace(/<.*?>/ig, "");
        }
        if (!NutritionRecommendations.value) {
          NutritionRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 2 }).filter(item => { return item.up_type == 1 })[0].content.replace(/<.*?>/ig, "");
        }
        if (!DoctorRecommendations.value) {
          DoctorRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 3 }).filter(item => { return item.up_type == 1 })[0].content.replace(/<.*?>/ig, "");
        }
        kcalType.value = 1
      } else {
        if (!FeedingRecommendations.value) {
          FeedingRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 1 }).filter(item => { return item.up_type == 3 })[0].content.replace(/<.*?>/ig, "");
        }
        if (!NutritionRecommendations.value) {
          NutritionRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 2 }).filter(item => { return item.up_type == 3 })[0].content.replace(/<.*?>/ig, "");
        }
        if (!DoctorRecommendations.value) {
          DoctorRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 3 }).filter(item => { return item.up_type == 3 })[0].content.replace(/<.*?>/ig, "");
        }
      }


      let color = ["#3EA4AA"];
      let color1 = ["#D0443B", "#3EA4AA"];
      let color2 = ["#D0443B", "#3EA4AA"];
      let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
      var arr = [];
      var arr2 = [];
      var parr = res.data.data.contents.primaryHeight;
      for (let i = 0; i < parr.length; i++) {
        arr.push(parr[i].content);
        arr2.push(parr[i].month);
      }
      var arr1 = [];
      var arr3 = [];
      var parr1 = res.data.data.contents.primaryWeight;
      for (let i = 0; i < parr1.length; i++) {
        arr1.push(parr1[i].content);
        arr3.push(parr1[i].month);
      }

      var myChart = echarts.init(document.getElementById("myChart1"));
      myChart.value = myChart;
      myChart.setOption({
        backgroundColor: "#fff",
        color: color,
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            name: "次数",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15],
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "BMI值",
            axisLabel: {
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "dotted",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  "rgba(83,148,208,0.15)",
                  "rgba(103,194,58,0.15)",
                  "rgba(226,203,80,0.15)",
                  "rgba(226,115,80,0.15)",
                ],
              },
            },
          },
        ],
        series: [
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumBmi,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      var myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        backgroundColor: "#fff",
        color: color1,
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15],
            },
            data: arr2,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "身高",
            axisLabel: {
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
            },
          },
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[0],
              },
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr,
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumHeight,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });

      var myChart2 = echarts.init(document.getElementById("myChart3"));
      myChart2.value = myChart2;
      myChart2.setOption({
        backgroundColor: "#fff",
        color: color2,
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15],
            },
            data: arr3,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "体重",
            axisLabel: {
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
            },
          },
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[0],
              },
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "white",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr1,
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumWeight,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    });
});
</script>

<style scoped>
.biao1 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
  border-right: 1px solid rgb(9, 165, 120);
  background-color: rgb(42, 178, 139);
  color: #fff;
}

.biao5 {
  width: 25%;
  border-right: 1px solid rgb(9, 165, 120);
  background-color: rgb(42, 178, 139);
  color: #fff;
}

.biao6 {
  width: 25%;
  border-right: 1px solid rgb(9, 165, 120);
  color: #000;
}

.biao2 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
  border-right: 1px solid rgb(9, 165, 120);
  color: #000;
}

.biao3 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
  background-color: rgb(42, 178, 139);
  color: #fff;
}

.biao4 {
  width: 75%;
  border-bottom: 1px solid rgb(9, 165, 120);
  color: #000;
}

.biao7 {
  width: 25%;
  color: #000;
}

.params {
  width: 100%;
  font-size: 22px;
  font-weight: bold;
}

#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
}

#basic {
  font-size: 14px;
  width: 1075px;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break: break-all;
  margin: auto;
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}

#basic #createTime {
  font-size: 16px;
  color: #999999;
  float: right;
}

.subTitle {
  font-size: 30px;
  text-align: center;
  height: 30px;
  color: #2ab28b;
}

.right-box-card {
  margin-left: 2%;
  margin-top: 1%;
  position: static;
  top: calc(260px);
  width: 60%;
  float: left;
  /*min-height: 650px;*/
}

.images-wrapper {
  width: 100%;
  position: relative;
  height: 173px;
  font-weight: bold;
}

.foodsNames {
  color: red;
}

.images-content {
  position: absolute;
  z-index: 1;
  line-height: 54px;
  top: calc(55% - 54px);
  overflow: hidden;
  margin-left: 55%;
  font-size: 18px;
}

.service_plate {
  background: url("../../assets/img/evaluaction_service_plate.png") center no-repeat;
}

.dietOn {
  height: 510px;
  margin-bottom: 270px;
}

.everyRed {
  color: red;
}

.everyOrange {
  color: orange;
}

.everyBlack {
  color: #333333;
}

.time-botton {
  background-color: #2ab28b;
  width: 108px;
  height: 41px;
  color: #fff;
  font-size: 16px;
  border-radius: 100px;
  line-height: 41px;
  margin: 42px 0 0 40px;
  text-align: center;
}

.time-type {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #85ce61;
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  box-shadow: 5px 5px 2px #888888;
  margin: 20px 0 20px 40%;
}

.der {
  width: 240px;
  height: 174px;
  background: url("../../assets/img/evaluaction_service_plate.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.platesFoods {
  margin-top: 5px;
  margin-left: 8px;

  color: #333333;
  font-size: 16px;
}

.platesFoods div {
  padding-bottom: 18px;
}

.platesFoods span {
  color: #666666;
}

.plates {
  width: 33%;
  float: left;
}

.plates .plates-top-img {
  float: left;
  margin-left: 1%;
  width: 30%;
}

.time-left-color {
  background: #85ce61;
}

.time-common-color {
  background: #e8b973;
}

.time-right-color {
  background: #6ea9e0;
}

.images-lab {
  position: absolute;
  z-index: 1;
  line-height: 54px;
  top: calc(85% - 54px);
  overflow: hidden;
  margin-left: 55%;
  font-size: 50px;
}

#params {
  margin-top: 3%;
  font-size: 22px;
  font-weight: bold;
}

.shu {
  width: 5px;
  height: 30px;
  background: #2ab28b;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
  margin-left: 3%;
}

#params span {
  font-size: 15px;
  color: #666;
  margin-left: 2%;
}

li {
  list-style-type: none;
}

#params ul {
  margin-left: 3%;
}

.topColor {
  color: #e8b973;
}

.topBgColor {
  border: 1px solid #e8b973;
  background-color: #e8b973;
}

.normalColor {
  color: #2ab28b;
}

.normalBgColor {
  border: 1px solid #2ab28b;
  background-color: #2ab28b;
}

.bottomColor {
  color: #6ca9e3;
}

.bottomBgColor {
  border: 1px solid #6ca9e3;
  background-color: #6ca9e3;
}

.images-lab span {
  font-size: 18px;
}

.images-right {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 15%;
  height: 20%;
  line-height: 34px;
  top: calc(95% - 54px);
  overflow: hidden;
  margin-left: 75%;
  font-size: 18px;
  border-radius: 30px;
  color: #fff;
  text-align: center;
}

#enerty .bt {
  background: #f7f7f7;
  color: #fff;
}

#enerty .bt span {
  width: 25%;
  float: left;
  text-align: center;
  color: #999999;
  line-height: 30px;
}

#enerty ul li {
  width: 48%;
  display: inline-block;
  margin: 0;
}

#enerty .element span {
  width: 25%;
  float: left;
  text-align: center;
  line-height: 60px;
  font-size: 14px;
}
</style>
